<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich" template="layout/template.xhtml">

	<ui:define name="body">

		<h:messages globalOnly="true" styleClass="message" id="globalMessages" />


		<rich:tabPanel style=" width : 100%; " switchType="client">
			<rich:tab id="personData" style=" width: 100%; "
				label="Persoonsgegevens" styleClass="tab">
				<h:panelGrid columns="1" style=" width : 100%; " cellpadding="2px"
					cellspacing="2px">
					<h:panelGrid columns="2"
						columnClasses="personContactData, personPicture"
						style=" width : 100%; " cellpadding="2px" cellspacing="2px">


						<rich:panel style="width : 100%; ">
							<f:facet name="header">
								<h:outputText
									value="#{userHome.instance.firstName}  #{userHome.instance.lastName}"
									styleClass="header" />
							</f:facet>
							<h:panelGrid columns="2" style=" width : 100%; "
								columnClasses="fifty, fifty" cellpadding="2px" cellspacing="2px">

								<s:decorate id="headerFirstName" template="layout/display.xhtml">
									<ui:define name="label">Naam</ui:define>
					            	#{userHome.instance.firstName} #{userHome.instance.lastName}
								</s:decorate>
								<div style="clear: both" />
							</h:panelGrid>
						</rich:panel>

						<rich:panel>
							<f:facet name="header">
								<h:outputText
									value="#{userHome.instance.firstName} #{userHome.instance.lastName}"
									styleClass="header" />
							</f:facet>
							<rich:panel rendered="#{!empty userHome.instance.picture}">
								<s:graphicImage value="#{userHome.instance.picture}" />
							</rich:panel>
							<rich:panel rendered="#{empty userHome.instance.picture}">
								<h:graphicImage value="/img/no_pic.jpg" />
							</rich:panel>
						</rich:panel>
					</h:panelGrid>


					<br />
					<br />
					<rich:panel style=" width : 100%;">
						<f:facet name="header">
							<h:outputText value="Persoons informatie" styleClass="header" />
						</f:facet>
						<h:panelGrid columns="2" style=" width : 100%; "
							columnClasses="fifty, fifty">

							<s:decorate id="firstName" template="layout/display.xhtml">
								<ui:define name="label">Voornaam</ui:define>
					            #{userHome.instance.firstName}
							</s:decorate>
							<s:decorate id="lastName" template="layout/display.xhtml">
								<ui:define name="label">Familienaam</ui:define>
            					#{employeeHome.instance.lastName}
       						</s:decorate>
						</h:panelGrid>
					</rich:panel>
				</h:panelGrid>
			</rich:tab>
		</rich:tabPanel>

		<div class="actionButtons">
			<s:button view="/UserEdit.xhtml" id="edit" value="Edit" /> 
			<s:button view="/#{empty userFrom ? 'UserList' : userFrom}.xhtml" id="done" value="Done" />
		</div>
	</ui:define>

</ui:composition>
